<template>
	<view class="contents">

		<view class="mfjfjcicd">
			<view>
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content" v-if="onfdd == false">
				<view v-if="current === 0">
					<view class="ondedd" v-for="(item, index) in Listdata" :key="item.id">
						<view class="left" @click="ondele(item)">
							<view>
								{{item.chufadidian}}-{{item.daodadidian}}
							</view>
							<text>{{item.zuohao}}-{{item.chencheren}}</text>
							<text>{{item.chufaTime}}至{{item.daodaTime}}</text>
						</view>
						<view class="right">

							<uni-title type="h2" :title="`￥${item.piaojia}`" color="#ff0000"></uni-title>
							<uni-title type="h4" :title="item.state" color="#005500"></uni-title>
							<text
								style="border-radius: 30rpx;border: 1px solid #ccc; width: 70px; padding: 5px; font-size: 12px; text-align: center; margin-left: -35rpx;"
								@click="detale(item)">删除订单</text>
						</view>
					</view>

				</view>
				<view v-if="current === 1">
					<view class="ondedd" v-for="(item, index) in Listdata" :key="item.id" v-show="item.state == '已付款'">
						<view class="left" @click="ondele(item)">
							<view>
								{{item.chufadidian}}-{{item.daodadidian}}
							</view>
							<text>{{item.zuohao}}-{{item.chencheren}}</text>
							<text>{{item.chufaTime}}至{{item.daodaTime}}</text>
						</view>
						<view class="right">

							<uni-title type="h2" :title="`￥${item.piaojia}`" color="#ff0000"></uni-title>
							<uni-title type="h4" :title="item.state" color="#005500"></uni-title>
							<text
								style="border-radius: 30rpx;border: 1px solid #ccc; width: 70px; padding: 5px; font-size: 12px; text-align: center; margin-left: -35rpx;"
								@click="detale(item)">删除订单</text>
						</view>
					</view>
				</view>
				<view v-if="current === 2">
					<view class="ondedd" v-for="(item, index) in Listdata" :key="item.id" v-show="item.state == '代付款'">
						<view class="left" @click="ondele(item)">
							<view>
								{{item.chufadidian}}-{{item.daodadidian}}
							</view>
							<text>{{item.zuohao}}-{{item.chencheren}}</text>
							<text>{{item.chufaTime}}至{{item.daodaTime}}</text>
						</view>
						<view class="right">

							<uni-title type="h2" :title="`￥${item.piaojia}`" color="#ff0000"></uni-title>
							<uni-title type="h4" :title="item.state" color="#005500"></uni-title>
							<text
								style="border-radius: 30rpx;border: 1px solid #ccc; width: 70px; padding: 5px; font-size: 12px; text-align: center; margin-left: -35rpx;"
								@click="detale(item)">删除订单</text>
						</view>
					</view>
				</view>
				<view v-if="current === 3">
					<view class="ondedd" v-for="(item, index) in Listdata" :key="item.id" v-show="item.state == '已取消'">
						<view class="left" @click="ondele(item)">
							<view>
								{{item.chufadidian}}-{{item.daodadidian}}
							</view>
							<text>{{item.zuohao}}-{{item.chencheren}}</text>
							<text>{{item.chufaTime}}至{{item.daodaTime}}</text>
						</view>
						<view class="right">

							<uni-title type="h2" :title="`￥${item.piaojia}`" color="#ff0000"></uni-title>
							<uni-title type="h4" :title="item.state" color="#005500"></uni-title>
							<text
								style="border-radius: 30rpx;border: 1px solid #ccc; width: 70px; padding: 5px; font-size: 12px; text-align: center; margin-left: -35rpx;"
								@click="detale(item)">删除订单</text>
						</view>
					</view>
				</view>
			</view>


			<view v-if="onfdd == true">
				<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png">
				</u-empty>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				onfdd: true,
				inde: 0,
				list1: [{
					name: '全部',
					index: 0,
				}, {
					name: '待出行',
					index: 1,
				}, {
					name: '待支付',
					index: 2,
				}, {
					name: '退款/已取消',
					index: 3,
				}],
				checkList: [false, false, false, false, false, false],
				contentText: {
					contentDefault: '追番',
					contentFav: '已追番'
				},
				tabs: [{
						title: '合肥南-合肥南 G7740',
						title1: "03车厢18A号 李四",
						title2: "2022-06-15 06:24至07:14",

					},
					{
						title: '合肥南-合肥南 G7740',
						title1: "03车厢18A号 李四",
						title2: "2022-06-15 06:24至07:14",

					},
					{
						title: '合肥南-合肥南 G7740',
						title1: "03车厢18A号 李四",
						title2: "2022-06-15 06:24至07:14",

					},
					{
						title: '合肥南-合肥南 G7740',
						title1: "03车厢18A号 李四",
						title2: "2022-06-15 06:24至07:14",

					},
					{
						title: '合肥南-合肥南 G7740',
						title1: "03车厢18A号 李四",
						title2: "2022-06-15 06:24至07:14",

					},
				],
				Listdata: [],
				items: ['全部', '待出行', '待支付', '退款/已取消'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text'

			}
		},
		onLoad() {
			let _this = this
			uni.request({
				url: "http://localhost:8000/api/tran",
				method: 'GET',
				success(res) {
					console.log('res', res.data)
					_this.Listdata = res.data.data
					console.log('this.Listdata', _this.Listdata)
					_this.onfdd = false
				},
				fail(err) {
					console.log('err', err)
				}
			})


		},
		methods: {
			// ondekekd(item){
			// 	console.log('item', item)
			// 	let json = JSON.stringify(item)
			// 	let dksks = encodeURIComponent(json)
			//              uni.navigateTo({
			//              	url:"./particulars/particulars?item="+dksks
			//              })     
			// },
			ondele(item) {
				console.log('item', item)
				let json = JSON.stringify(item)
				let jsoncode = encodeURIComponent(json)
				uni.navigateTo({
					url: "/pages/Orderpay/Orderpay?itemdata=" + jsoncode
				})
			},

			detale(ite) {
				let _this = this
				console.log('点击删除', ite.id)
				//  uni.request({
				//  	url:"http://localhost:8000/api/tran/delete",
				// method:"POST",
				// data:{
				// 	id: ite.id
				// },
				// success(res) {
				//  console.log('res', res.data)					
				// }
				// fail(err) {
				// 	console.log('err', err)
				// }			    
				//  })

				_this.Listdata.forEach((item, index) => {
					if (item.id == ite.id) {
						_this.Listdata.splice(index, 1)
					}
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {
					console.log(e.detail.value);
					this.activeColor = e.detail.value
				}
			}

		}
	}
</script>

<style lang="scss">
	html,
	body {
		width: 100%;
		height: 100%;
	}

	.contents {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mfjfjcicd {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.ondedd {
		width: 93%;
		height: 260rpx;
		border: 3rpx solid #ccc;
		border-radius: 20rpx;
		display: flex;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #fff;
		padding-left: 40rpx;
		
		box-sizing: border-box;

		.left {
			width: 70%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around
		}

		.right {
			width: 30%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around
		}
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;

	}


	.content-text {
		font-size: 14px;
		color: #666;
		width: 100px;
	}

	.color-tag {
		width: 60px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
</style>